<template>
  <div class="editor">
  </div>
</template>
<script>
  export default {
    name: 'editor',
    components: {},
    data () {
      return {
        publicPath: process.env.BASE_URL
      }
    },
    created () {
    },
    mounted () {

    },
    watch: {

    },

    methods: {
    }
  }
</script>

<style lang="scss">
  @keyframes bounceInLeft {
    from, 50%, to {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      opacity: 0;
      transform: translate3d(-3000px, 0, 0);
    }
    50% {
      opacity: 0.5;
      transform: translate3d(-50px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      opacity: 0;
      transform: translate3d(3000px, 0, 0);
    }
    60% {
      opacity: 1;
      transform: translate3d(-25px, 0, 0);
    }
    75% {
      transform: translate3d(10px, 0, 0);
    }
    90% {
      transform: translate3d(-5px, 0, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes animationName {
    0% {
      opacity: 1;
      transform: scale(1) translate(100px, 100px);
    }
    0% {
      opacity: 0.5;
      transform: scale(1) translate(500px, 500px);
    }
    100% {
      opacity: 1;
      transform: scale(.5) translate(1000px, 800px);
    }
  }
</style>
